<template>
  <!-- 催收执行页-案件信息模块-客户信息 -->
  <section class="component cust-info">
    <!-- 客户信息 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">客户信息</span>
    </el-row>
    <data-grid
      :totalSpan="12"
      :labelWidth="125"
      labelAlign="center"
      contentAlign="left"
      style="margin:10px;"
    >
      <data-grid-item label="在职状态" :span="3">
        {{personalInfo.jobStatus | dictConvert('JobStatus')}}
        <span><el-button type="text" style="padding-left:150px" @click="modifyJobStatus">修改</el-button></span>
      </data-grid-item>
      <data-grid-item label="工号" :span="3">{{personalInfo.empNo}}</data-grid-item>
      <data-grid-item label="性别" :span="3">{{personalInfo.sex | dictConvert('Sex') || '未知'}}</data-grid-item>
      <data-grid-item label="学历" :span="3">{{personalInfo.education | dictConvert('Education')}}</data-grid-item>
      <data-grid-item label="婚姻状况" :span="3">{{personalInfo.marital | dictConvert('Marital')}}</data-grid-item>
      <data-grid-item label="手机号码" :span="3">{{personalInfo.mobileNo | encryptPhone}}</data-grid-item>
      <data-grid-item label="年龄" :span="3">{{personalInfo.age}}</data-grid-item>
      <data-grid-item label="电子邮件地址" :span="3">{{personalInfo.personalEmail}}</data-grid-item>
      <data-grid-item label="国籍" :span="3">{{personalInfo.nationality}}</data-grid-item>
      <data-grid-item label="证件类型" :span="3">{{personalInfo.idType | dictConvert('PersonalIdType')}}</data-grid-item>
      <data-grid-item label="证件号码" :span="3">{{personalInfo.idCard | encryptIDCardFour}}</data-grid-item>
      <data-grid-item label="发证机关所在地" :span="3">{{personalInfo.idLicence}}</data-grid-item>
      <data-grid-item label="身份证到期日期" :span="3">{{personalInfo.idCardExpirationDate | dateFormat}}</data-grid-item>
      <data-grid-item label="身份证地址" :span="3">{{personalInfo.idCardAddress}}</data-grid-item>
      <data-grid-item label="家庭地址" :span="3">{{personalInfo.localAddress}}</data-grid-item>
      <data-grid-item label="家庭座机" :span="3">{{personalInfo.localPhone | encryptPhone}}</data-grid-item>
      <data-grid-item label="客户标签" :span="3">
        {{personalInfo.personalLabel}}
        <span v-if="!hiddenButton"><el-button type="text" style="padding-left:150px" @click="ButtonSet">设置</el-button></span>
      </data-grid-item>
      <data-grid-item label="客户风险等级" :span="3">{{personalInfo.riskLevel}}</data-grid-item>
      <data-grid-item label="客群" :span="3">{{personalInfo.custType | encryptCustType}}</data-grid-item>
      <data-grid-item label="客户评分" :span="3">{{personalInfo.custModelScore != null ? personalInfo.custModelScore.toFixed(2) : ''}}</data-grid-item>
    </data-grid>
    <!-- 联系人信息 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">联系人信息</span>
    </el-row>
    <data-box :maxHeight="115" :data="personalContacts">
      <template slot="columns">
        <el-table-column
          prop="relation"
          label="关系"
          :min-width="$helper.getColumnWidth(3)"
          :formatter="(row) => $filter.dictConvert(row.relation,'Relationship')"
        ></el-table-column>
        <el-table-column prop="contName" label="姓名" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column
          label="性别"
          :min-width="$helper.getColumnWidth(2)"
          :formatter="(row) => $filter.dictConvert(row.contSex,'Sex')"
        ></el-table-column>
        <el-table-column prop="contIdCard" label="身份证号" :min-width="$helper.getColumnWidth(5)" :formatter="(row)=>$filter.encryptIDCardFour(row.contIdCard)"></el-table-column>
        <el-table-column prop="contAddress" label="住宅地址" :min-width="$helper.getColumnWidth(8)"></el-table-column>
        <el-table-column prop="contCity" label="城市" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column prop="phone" label="住宅电话" :min-width="$helper.getColumnWidth(4)" :formatter="(row)=>$filter.encryptPhone(row.phone)"></el-table-column>
        <el-table-column prop="contEmployer" label="工作单位" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column prop="contWorkPhone" label="单位电话" :min-width="$helper.getColumnWidth(4)" :formatter="(row)=>$filter.encryptPhone(row.contWorkPhone)"></el-table-column>
      </template>
    </data-box>
    <!-- 房产信息 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">房产信息</span>
    </el-row>
    <data-grid
      :totalSpan="12"
      :labelWidth="125"
      labelAlign="center"
      contentAlign="left"
      style="margin:10px;"
    >
      <data-grid-item label="房屋购置价" :span="3">{{personalHouse.housePurchasePrice}}</data-grid-item>
      <data-grid-item label="房屋评估价" :span="3">{{personalHouse.houseEvaluatePrice}}</data-grid-item>
      <data-grid-item label="首付金额" :span="3">{{personalHouse.downPayment}}</data-grid-item>
      <data-grid-item label="房贷余额" :span="3">{{personalHouse.loanBalance}}</data-grid-item>
      <data-grid-item label="房贷总期数" :span="3">{{personalHouse.houseLoanPeriod}}</data-grid-item>
      <data-grid-item label="房贷已还款期数" :span="3">{{personalHouse.repayPeriod}}</data-grid-item>
      <data-grid-item label="房贷月均还款额" :span="3">{{personalHouse.monthRepayment}}</data-grid-item>
      <data-grid-item label="其他房产地址1" :span="6">{{personalHouse.otherHouseAddr1}}</data-grid-item>
      <data-grid-item label="其他房产地址2" :span="6">{{personalHouse.otherHouseAddr2}}</data-grid-item>
      <data-grid-item label="其他房产地址3" :span="6">{{personalHouse.otherHouseAddr3}}</data-grid-item>
      <data-grid-item label="其他房产地址4" :span="6">{{personalHouse.otherHouseAddr4}}</data-grid-item>
    </data-grid>
    <!-- 收支状况 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">收支状况</span>
    </el-row>
    <data-grid
      :totalSpan="12"
      :labelWidth="125"
      labelAlign="center"
      contentAlign="left"
      style="margin:10px;"
    >
      <data-grid-item label="月均薪资(税后)" :span="3">{{personalIncome.deductionName}}</data-grid-item>
      <data-grid-item label="公积金缴存单位" :span="3">{{personalIncome.cardNumber}}</data-grid-item>
      <data-grid-item label="缴存基数" :span="3">{{personalIncome.depositBank}}</data-grid-item>
      <data-grid-item label="公积金个人缴存额度" :span="3">{{personalIncome.personalSource}}</data-grid-item>
      <data-grid-item label="个人社保月均缴存额度" :span="3">{{personalIncome.channel}}</data-grid-item>
      <data-grid-item label="社保缴存比例" :span="3">{{personalIncome.referrer}}</data-grid-item>
      <data-grid-item label="月固定补助" :span="3">{{personalIncome.recommendBranch}}</data-grid-item>
      <data-grid-item label="年收入" :span="3"></data-grid-item>
      <data-grid-item label="家庭月收入" :span="3"></data-grid-item>
      <data-grid-item label="每月租房/房贷费用" :span="3"></data-grid-item>
    </data-grid>
    <!-- 客户标签设置弹框 -->
    <el-dialog width="450px" title="设置客户标签" :visible.sync="dialog.sign" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form ref="form">
        <el-form-item>
          <el-select
            style="text-align: center;"
            v-model="model.personalLabel"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="{index,name} in customDataDict.filter(v=>v.dataType==='PERSONAL_LABEL').filter(i=>i.name!=='客户标签')"
              :key="index"
              :label="name"
              :value="name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传附件">
          <file-upload ref="upload_personal_label" :fileList.sync="fileList"></file-upload>
        </el-form-item>
      </el-form>
      <div class="operate-buttons">
        <el-button @click="emitClose">取消</el-button>
        <el-button @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改在职状态弹窗 -->
    <el-dialog width="450px" title="修改在职状态" :visible.sync="dialog.modifyJobStatus" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form ref="form">
        <el-form-item>
          <el-select
            style="text-align: center;"
            v-model="personalJobStatus"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="{index,name,code} in $dict.getDictData('JobStatus')"
              :key="index"
              :label="name"
              :value="code"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="operate-buttons">
        <el-button @click="modifyJobStatusClose">取消</el-button>
        <el-button @click="modifyJobStatusSubmit">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service.ts";
import { FlowTaskService } from '~/services/domain-service/flow-task.service';
import { DataGrid, DataGridItem } from "@zct1989/vue-component";
import DataBox from "~/components/common/data-box.vue";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
import { Prop } from "vue-property-decorator";
import { CASE_CHANNEL,ApplyType} from "~/config/enum.config";
import FileUpload from "~/components/common/file-upload.vue"
const CollectionExecution = namespace('collection-execution');


@Component({
  components: {
    DataBox,
    DataGrid,
    DataGridItem,
    FileUpload
  }
})
export default class CustInfo extends Vue {
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(DataImportExcelInfoService)
  private dataImportExcelInfoService: DataImportExcelInfoService;
  @Dependencies(FlowTaskService)
  private flowTaskService: FlowTaskService;
  @State private customDataDict;
  @CollectionExecution.State('hiddenButton')
  private hiddenButton;

  private personalInfo: any = {};
  private personalBankInfo: any = [];
  private personalContacts: any[] = [];
  private personalHouse: any = {};
  private personalIncome: any = {};
  private applyType = ApplyType.setLabel.value;
  private fileList: any[] = []; //文件上传
  private model: any = {
    personalLabel: "",
    caseIds: [],
  };
  private personalJobStatus: any = ''

  private dialog = {
    sign: false,
    modifyJobStatus:false
  };

  /**
   * caseId
   */
  @Prop({ type: String, required: true })
  private caseId: string;

  /**
   * caseChannel
   */
  @Prop({ type: String, required: true })
  private caseChannel: string;

private mounted(){
  console.log(this.customDataDict,'customDataDict')
}
  /**
   * 是否导入
   */
  private get isImport() {
    return this.caseChannel === CASE_CHANNEL.import;
  }

  /**
   * 设置
   */
  private ButtonSet() {
    this.dialog.sign = true;
    console.log(this.customDataDict, "updateCustomDataDict");
  }
  /**
   * 修改在职状态
   */
  private modifyJobStatus() {
    this.dialog.modifyJobStatus = true;
  }
  /**
   * 修改在职状态
   */
  private modifyJobStatusClose() {
    this.personalJobStatus = ''
    this.dialog.modifyJobStatus = false;
  }
  /**
   * 修改在职状态
   */
  private modifyJobStatusSubmit() {
    this.caseOperatorPageService.editPersonalJobStatus({
      jobStatus: this.personalJobStatus,
      caseId:this.caseId
    }).subscribe(
      (data) => {
        this.$message.success('修改成功');
        this.refreshData();
        this.modifyJobStatusClose();
      },
      (err) => {
      },
    )
  }

  /**
   * 确定
   */
  private submit() {
    this.flowTaskService
      .checkApplyCategory({ applyCategory: this.applyType })
      .subscribe((data) => {
        // 0 拒绝，1 提示，2 通过
        console.log(data,"提示")
        if (data.status === 1) {
          this.$confirm("该" + this.$dict.getDictName(this.applyType, 'ApplyCategory') + "申请将直接生效，是否继续?", '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.settingLabel();
          }).catch(() => {

          });
        } else if (data.status === 2) {
          this.settingLabel();
        }else{
          this.$message.error(data.message);
        }
      });
  }

  //确认设置死亡标签
  private settingLabel(){
    this.model.caseIds = []
    if (this.fileList.length) {
        this.fileList.map((v) => {
          this.model.fileIds += v.response.id + ',';
        })
        this.model.fileIds = this.model.fileIds.replace("undefined","")
      }
    this.model.caseIds.push(this.caseId)
    this.caseApplyRecordService
    .settingPersonalLabel(this.model)
    .subscribe(data => {
      this.personalInfo.personalLabel=data
      this.dialog.sign = false
      this.$message("设置成功")
      this.$router.back()
    });
  }

  /**
   * 取消
   */
  private emitClose() {
    const upload: any = this.$refs['upload_personal_label'];
    upload.reset();
    this.dialog.sign = false;
    this.model.personalLabel = "";
  }

  private activated() {
    this.refreshData();
  }

  private refreshData() {
    this.getPersonalInfo();
    this.getContacts();
    this.getHouseInfo();
    this.getIncome();
  }

  /**
   * 获取客户信息
   */
  private getPersonalInfo() {
    if (this.isImport) {
      this.dataImportExcelInfoService
        .getImportPersonalInfo(this.caseId)
        .subscribe(data =>{
          this.personalInfo = data
        });
    } else {
      this.caseOperatorPageService
        .personalInfo(this.caseId)
        .subscribe(data =>{
          this.personalInfo = data
        });
    }
  }


  /**
   * 获取联系人信息
   */
  private getContacts() {
    if (this.isImport) {
      this.dataImportExcelInfoService
        .getImportPersonalContacts(this.caseId)
        .subscribe(data => {
          this.personalContacts = data;
        });
    } else {
      this.caseOperatorPageService
        .personalContacts(this.caseId)
        .subscribe(data => (this.personalContacts = data));
    }
  }

  /**
   * 获取客户房产信息
   */
  private getHouseInfo() {
    if (this.isImport) {
      this.dataImportExcelInfoService
        .getImportPersonalHouse(this.caseId)
        .subscribe(data => (this.personalHouse = data));
    } else {
      this.caseOperatorPageService
        .queryPersonalHouse(this.caseId)
        .subscribe(data => (this.personalHouse = data));
    }
  }

  /**
   * 获取客户收支状况
   */
  private getIncome() {
    if (this.isImport) {
      this.dataImportExcelInfoService
        .getImportPersonalIncome(this.caseId)
        .subscribe(data => (this.personalIncome = data));
    } else {
      this.caseOperatorPageService
        .queryPersonalIncome(this.caseId)
        .subscribe(data => (this.personalIncome = data));
    }
  }
}
</script>

<style lang="less" scoped>
.component.cust-info {
  .circle {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 15px;
    margin-right: 5px;
    background-color: #28313e;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    vertical-align: middle;
  }

  .circle-title {
    font-size: 14px;
    line-height: 13px;
    color: #28313e;
  }
}
</style>
